@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

html{
    background: white;
}

input[type="date"]:before{
    content: attr(placeholder);//强制给placeholder属性
    color:darkgrey;// 这种灰色应该是最适合的
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: darkgrey; opacity:1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: darkgrey;opacity:1;
}

input:-ms-input-placeholder{
    color: darkgrey;opacity:1;
}

input::-webkit-input-placeholder{
    color: darkgrey;opacity:1;
}

#img-title{
    width: 50%;
    margin-left: 25%;
}

#img-title-thanks{
    width: 50%;
    margin-left: 25%;
    margin-top: 25%;
}

#img-title-error{
    width: 50%;
    margin-left: 25%;
    margin-top: 25%;
    color: red;
}

#form-title-thanks{
    text-align:center;
    font-size: 60px;
    font-weight: bold;
    color: #1296db;
}

#form-text-thanks{
    text-align:center;
    font-size: 30px;
    padding-left: 10%;
    font-weight: bold;
    color: #1296db;
}

#form-title{
    text-align:center;
    font-size: 50px;
    padding-left: 10%;
    font-weight: bold;
}

#form-login-title{
    text-align:center;
    font-size: 50px;
    padding-left: 10%;
    font-weight: bold;
    margin-top: 50%;
}

#feedback-page{
    text-align:center;
}

#text-feedback{
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    background-color:white;
    text-align:center;
}

#form-main{
    width:100%;
    float:left;
}

#form-div {
    /*background-color:#3c3c3c;*/
    padding-left:35px;
    padding-right:35px;
    padding-top:35px;
    padding-bottom:50px;
    width: 100%;
    float: left;
}

.feedback-input {
    opacity:0.9;
    color: darkgrey;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight:400;
    font-size: 38px;
    border-radius: 0;
    line-height: 48px;
    background-color: #fbfbfb;
    border: 3px solid #fbfbfb;
    padding: 13px 13px 13px 84px;
    margin-bottom: 10px;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.feedback-input:focus{
    background: #fff;
    box-shadow: 0;
    border: 3px solid #3498db;
    color: #3498db;
    outline: none;
    padding: 13px 13px 13px 84px;
}

.focused{
    color:#30aed6;
    border:#30aed6 solid 3px;
}

/* Icons ---------------------------------- */
#name{
    background-image: url(/svg/user.svg);
    background-size: 48px 48px;
    background-position: 13px 13px;
    background-repeat: no-repeat;
}

#name:focus{
    background-image: url(/svg/user.svg);
    background-size: 48px 48px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#username{
    background-image: url(/svg/user.svg);
    background-size: 48px 48px;
    background-position: 13px 13px;
    background-repeat: no-repeat;
}

#username:focus{
    background-image: url(/svg/user.svg);
    background-size: 48px 48px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#password{
    background-image: url(/svg/password.svg);
    background-size: 48px 48px;
    background-position: 13px 13px;
    background-repeat: no-repeat;
}

#password:focus{
    background-image: url(/svg/password.svg);
    background-size: 48px 48px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#phone{
    background-image: url(/svg/phone.svg);
    background-size: 48px 48px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#phone:focus{
    background-image: url(/svg/phone.svg);
    background-size: 48px 48px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#sex{
    background-image: url(/svg/sex.svg);
    background-size: 48px 48px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#sex:focus{
    background-image: url(/svg/sex.svg);
    background-size: 48px 48px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#age{
    background-image: url(/svg/age.svg);
    background-size: 48px 48px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#sex:age{
    background-image: url(/svg/age.svg);
    background-size: 48px 48px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#birthday{
    background-image: url(/svg/birthday.svg);
    background-size: 48px 48px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#birthday:focus{
    background-image: url(/svg/birthday.svg);
    background-size: 48px 48px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#code{
    background-image: url(/svg/code.svg);
    background-size: 48px 48px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#code:focus{
    background-image: url(/svg/code.svg);
    background-size: 48px 48px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#verifycode{
    background-size: 30px 30px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

#comment{
    background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
    background-size: 30px 30px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
}

textarea {
    width: 100%;
    height: 150px;
    line-height: 150%;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
    background-color:white;
}

#button-login{
    font-family: 'Montserrat', Helvetica, Arial,  sans-serif;
    float:left;
    width: 100%;
    border: #fbfbfb solid 4px;
    cursor:pointer;
    background-color: #3498db;
    color:white;
    font-size:38px;
    padding-top:22px;
    padding-bottom:22px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

#button-login:hover{
    background-color: rgba(0,0,0,0);
    color: #0493bd;
}

#button-blue{
    font-family: 'Montserrat', Helvetica, Arial,  sans-serif;
    float:left;
    width: 100%;
    border: #fbfbfb solid 4px;
    cursor:pointer;
    background-color: #3498db;
    color:white;
    font-size:38px;
    padding-top:22px;
    padding-bottom:22px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

#button-blue:hover{
    background-color: rgba(0,0,0,0);
    color: #0493bd;
}

#button-code{
    font-family: 'Montserrat', Helvetica, Arial,  sans-serif;
    float:left;
    width: 100%;
    border: #fbfbfb solid 4px;
    cursor:pointer;
    background-color: #3498db;
    color:white;
    font-size:38px;
    padding-top:22px;
    padding-bottom:22px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

#button-code:hover{
    background-color: rgba(0,0,0,0);
    color: #0493bd;
}

.submit:hover {
    color: #3498db;
}

.ease {
    border-top:3px #3c3c3c solid;
    width: 0px;
    height: 76px;
    background-color: lightyellow;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -o-transition: .3s ease;
    -ms-transition: .3s ease;
    transition: .3s ease;
}

.submit:hover .ease{
    width:100%;
    background-color:white;
}

.option {
    font-size: 18px;
}

@media only screen and (max-width: 580px) {
    #form-div{
        left: 3%;
        margin-right: 3%;
        width: 88%;
        margin-left: 0;
        padding-left: 3%;
        padding-right: 3%;
    }
}
